<template>
  <view class="popup-page">
    <u-popup :show="leucorrheaPopupShow" @close="close" round="20" :customStyle="{background: '#f1f1f1'}">
      <view class="popup-context-top">
        <view class="popup-context-top-title">
          <view class="popup-top-title-cancel" @click="close">取消</view>
          <view class="popup-top-title-center">白带</view>
          <view class="popup-top-title-submit" @click="submit">确定</view>
        </view>
        <view v-for="(item, index) in leucorrheaList" style="border-radius: 20rpx;padding: 20rpx 20rpx;background: #FFFFFF;
          margin: 20rpx 0;display: flex;justify-content: space-between;align-items: center;" @click="itemClick(index)">
          <u-icon :name="item.url" :size="50"/>
          <view style="width: 70%;display:flex;flex-flow: column;justify-content: space-between;height: 84rpx">
            <view style="font-size: 28rpx;font-weight: bold;">{{ item.label }}</view>
            <view style="font-size: 23rpx;color: #888888">{{ item.description }}</view>
          </view>
          <view style="width: 10%">
            <uni-icons v-if="item.selectd" type="checkbox-filled" size="28" color="#4cd964"/>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {commonLeucorrheaList} from "@/api/commonArray";

export default {
  data() {
    return {
      leucorrheaPopupShow: false,
      leucorrheaList: commonLeucorrheaList,
      selectData: {
        from: "leucorrhea",
        leucorrheaSelectData: null
      }
    };
  },
  methods: {
    close() {
      this.leucorrheaPopupShow = false
    },
    open(selectData) {
      for (let i = 0; i < this.leucorrheaList.length; i++) {
        if (this.leucorrheaList[i].value == selectData) {
          this.leucorrheaList[i].selectd = true
        }
      }
      this.leucorrheaPopupShow = true
    },
    itemClick(index) {
      for (let i = 0; i < this.leucorrheaList.length; i++) {
        this.leucorrheaList[i].selectd = false
      }
      this.leucorrheaList[index].selectd = true
    },
    submit() {
      for (let i = 0; i < this.leucorrheaList.length; i++) {
        const temp = this.leucorrheaList[i];
        if (temp.selectd) {
          this.selectData.leucorrheaSelectData = temp
        }
      }
      this.$emit('callback', this.selectData)
      this.close()
    }
  }
}
</script>

<style lang="scss">
.right-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 40rpx 10rpx;
  z-index: 999;
}
</style>
